<!--vue模板-->
<template>
  <div>
    <!--表格数据-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column
        label="序号"
        type="index"
        width="80"
        header-align="center"
        align="center"
      />
      <el-table-column prop="account" label="用户名" header-align="center" />

      <el-table-column
        prop="createTime"
        label="创建时间"
        header-align="center"
        width="180"
      />
      <el-table-column
        label="权限"
        header-align="center"
        align="center"
        width="300px"
      >
        <template #default="{ row }">
          <span v-if="row.roleId == '1'">管理员</span>
          <span v-else-if="row.roleId == '2'">客户</span>
          <span v-else-if="row.roleId == '3'">供应商</span>
          <span v-else-if="row.roleId == '4'">货代</span>
          <span v-else-if="row.roleId == '5'">销售</span>
          <span v-else>未知权限</span>
        </template>
      </el-table-column>

      <!-- 添加操作列 -->
      <el-table-column
        label="操作"
        header-align="center"
        align="center"
        width="150px"
      >
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            :disabled="row.roleId == '1'"
            @click="save(row.id, row.roleId)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--新增-->
    <Update
      ref="update"
      :visible="isShow"
      @close="isShow = false"
      @refresh="init()"
    />
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { queryUser } from "@/api/users.js";
import Update from "./Update.vue";

//表格数据
const tableData = ref([]);
//是否显示新增用户
const isShow = ref(false);
const update = ref(null);

function save(id, roleId) {
  isShow.value = true;
  update.value.init(id, roleId);
}

//方法
async function init() {
  let params = {
    page: 1,
    pageSize: 10
  };
  let res = await queryUser(params);
  console.log(res);
  if (res.code == 200) {
    tableData.value = res.data.list;
  }
}

//生命周期钩子
onBeforeMount(() => {
  init();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.toolbar {
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  padding-left: 20px;
}
</style>
